﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WorkingWithCllections.aspx.cs" Inherits="BugSysSolution.PageTemplate.WorkingWithCllections" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Knockout.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h2>Person</h2>
            <ul data-bind="foreach:people">
                <li>
                    <div>
                        <span data-bind="text:name"></span>has<span data-bind="text:children().length"></span>Children:
                    <a href="#" data-bind="click:addChild">Add Child</a>
                    </div>
                    <ul data-bind="foreach:children">
                        <li>
                            <span data-bind="text: $data"></span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var Person = function (name, children) {
        this.name = name;
        this.children = ko.observableArray(children);
        this.addChild = function () {
            this.children.push("New Child");
        }
    }

    var model = function () {
        this.people = [
            new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
            new Person("Bertie", ["Boutros-Boutros", "Brianna", "Barbie", "Bee-bop"]),
            new Person("Charles", ["Cayenne", "Cleopatra"])
        ];
    }

    ko.applyBindings(new model());
</script>
